<div ng-controller="StateEditor">
  <!--
    The 'height' styling keeps the scrollbar from juddering during the
    fade-out/fade-in animation.
  -->
  <div style="min-height: 1000px;">
    <div class="oppia-editor-cards-container">
      <div style="font-size: 16px; margin-top: 35px;">
        {% include 'editor/sidebar_state_name.html' %}
      </div>

      <md-card class="oppia-editor-card-with-avatar">
        <div class="oppia-editor-card-body" ng-show="!!stateName">
          <div id="tutorialStateContent" class="oppia-editor-card-section" style="padding-top: 40px; padding-bottom: 40px;">
            {% include 'editor/state_editor_content.html' %}
          </div>
        </div>
      </md-card>

      <div ng-show="isInteractionShown">
        {% include 'editor/state_editor_interaction.html' %}
      </div>

      <div ng-hide="!isInteractionIdSet || isCurrentStateTerminal">
        {% include 'editor/state_editor_responses.html' %}
      </div>

      <div>
        {% include 'editor/state_statistics.html' %}
      </div>
    </div>
  </div>
</div>
